<template>
	<view class="content">
		<!-- 查看所有还是只查看开放状态的检测点 -->
		<u-form :model="formData" ref="uForm">
			<u-form-item label="是否查询所有">
				<u-switch v-model="checked" size="32"></u-switch>
			</u-form-item>
		</u-form>
		<template v-if="hsjcdList.length > 0">
			<view v-for="item in hsjcdList" :key="item.id" class="every-hsjcd">
				<view class="hsjcd-info-list">
					<view style="font-weight: bold;">{{item.name}}</view>
				</view>
				<view class="hsjcd-info-list">
					<view class="one-info">
						<text class="iconfont icon-yingye">
							当前状态：{{item.status == "true" ? "开放" : item.status == "false" ? "关闭" : "--"}}
						</text>
					</view>
					<view class="one-info">
						<text class="iconfont icon-gongsimingcheng">窗口数量：{{item.window_num}}</text>
					</view>
				</view>
				<view class="hsjcd-info-list">
					<view class="one-info"><text class="iconfont icon-kaishi">开始时间：{{item.morning_open_time}}</text></view>
					<view class="one-info"><text class="iconfont icon-ETL-jieshu">结束时间：{{item.evening_close_time}}</text></view>
				</view>
				<view class="hsjcd-info-list">
					<view><text class="iconfont icon-dingweixiao">详细地址：{{item.address_detail}}</text></view>
				</view>
			</view>
		</template>
		<view v-else class="no-data">暂无数据~</view>
	</view>
</template>

<script>
	let me;
	import funcs from "@/static/js/func.js"
	export default {
		data() {
			return {
				formData: {
					
				},
				checked: true,
				allHsjcdList: [],
			};
		},
		onShow() {
			this.getHsjcdList()
		},
		computed: {
			/**
			 * 根据用户选择的查询范围，来筛选数据
			 */
			hsjcdList() {
				return this.allHsjcdList.filter(item => {
					if (!this.checked) {
						return item.status == "true"
					} else {
						return true
					}
				});
			}
		},
		onLoad() {
			me = this;
		},
		methods: {
			/**
			 * 查询核酸检测点列表
			 */
			getHsjcdList() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/hsjcdManage/allHsjcdList", {}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						me.allHsjcdList = res.data;
					} else if (res.msg == "token无效" || res.msg == "请先登录" || res.msg == "登录已过期") {
						uni.clearStorageSync();
						uni.switchTab({
							url: "/pages/tabbar/tabbar-4/tabbar-4"
						})
					} else {
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading()
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			handleCall(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx;

		.u-form {

			/deep/.u-form-item {
				padding: 0;
				.u-form-item__body {
					display: flex;

					.u-form-item--left {
						width: auto !important;
						flex: auto !important;
					}
				}
			}
		}

		.every-hsjcd {
			padding: 24rpx;

			&:not(:first-child) {
				margin-top: 24rpx;
			}

			border: 1px solid #ccc;
			border-radius: 8rpx;

			.hsjcd-info-list {
				display: flex;
				justify-content: space-between;
				line-height: 1.6em;
				.one-info {
					flex: .5;
				}
				/deep/.iconfont {
					span {
						padding-left: 16rpx;
					}
				}
			}
		}

		.no-data {
			text-align: center;
			margin-top: 20vh;
		}
	}
</style>